<template>
    <contentField>
        <table class="table table-dark table-striped table-hover">
                        <thead>
                            <tr>
                                <th>玩家名称</th>
                                <th>玩家头像</th>
                                <th>玩家注册时间</th>
                                <th>竞赛积分</th>
                            </tr>
                        </thead>

                        <tbody >
                            <tr v-for="user in users" :key="user.id" >
                                <td>
                                    <span class="record-user-username">{{ user.username }}</span>
                                </td>
                                <td>
                                    <img :src="user.photo" alt="" class="record-user-photo">                           
                                </td>
                                <td>{{ user.createTime }}</td>
                                <td>{{ user.rating }}</td>
                            </tr>
                        </tbody>
                    </table>

                    <nav aria-label="...">
                        <ul class="pagination" style="float: right">
                            <li class="page-item    ">
                                <a class="page-link" href="#" @click="click_page(-2)">前一页</a>
                            </li>
                            <li :class="'page-item' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
                                <a class="page-link" href="#">{{ page.number }}</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#" @click="click_page(1)">后一页</a>
                            </li>
                        </ul>
                    </nav>
    </contentField>
</template>

<script>
import contentField from '@/components/contentField'
import { useStore } from 'vuex';
import $ from "jquery"
import { ref } from 'vue';

export default {
    components: {
        contentField,
    },
    setup () {
        const store = useStore();
        let current_page = 1;
        let users = ref([]);
        let total_users = 0;
        let pages = ref([]);

        const click_page = (page) => {
            if (page === -2) page = current_page -1;
            else if (page === 1) page = current_page + 1;
            let max_pages = parseInt(Math.ceil(total_users / 10));
            if (page >= 1 && page <= max_pages) {
                pull_page(page)
            }
        }

        const update_pages = () => {
            let max_pages = parseInt(Math.ceil(total_users / 10));
            let new_pages = [];
            for (let i = current_page - 2; i <= current_page + 1; i ++ ) {
                if (i >= 1 && i <= max_pages) {
                    new_pages.push({
                        number: i,
                        is_active: i === current_page
                    });
                }
            }

            pages.value = new_pages;
        }

        const pull_page = page => {
            current_page = page;
            $.ajax({
                url: "http://localhost:3000/rankList/getList/",
                type: "get",
                data: {
                    page,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(response) {
                    console.log(response)
                    users.value = response.users;
                    total_users = response.users_count
                    update_pages();
                },
            })
        }

        pull_page(current_page);

        return {
            users,
            pages,
            click_page,
            total_users
        }
    }
}
</script>

<style scoped>

img.record-user-photo {
    width: 4vh;
    border-radius: 50%;
}
</style>